<!-- 模板 -->
<template>
  <div class="exam">
       <div class="box">
          <!-- <div class="btn">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加</el-button>
          </div> -->
          <div>
                <el-form  :inline="true"  :model="params" size="small"  label-width="80px" >
                    <el-form-item label="因子名称:" >
                        <el-select v-model="params.factorId"  placeholder="请选择因子名称" clearable filterable @change="search"  style="width: 100%;">
                            <el-option
                            v-for="item in options5"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="量表名称:">
                        <el-input  v-model="params.measureId" placeholder="输入量表名称"  clearable @clear="search" /> 
                    </el-form-item> -->
                    <el-form-item label="量表名称:" >
                        <el-select v-model="params.measureId"  placeholder="请选择测量表名称" clearable filterable @change="search"  style="width: 100%;">
                            <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="题目名称:">
                        <el-input  v-model="params.name" placeholder="输入题目名称  "  clearable @clear="search" /> 
                    </el-form-item>
                    <span style="margin-left:10px">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="small" @click="resetParams"> 重置 </el-button>
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="add" >添加</el-button>
                    </span>
                </el-form>
              </div>
        <el-card>
            <el-table :data="tableData" border style="width: 100%" >
            <el-table-column prop="measureName" label="测量表名" align="center"> </el-table-column>
            <el-table-column prop="factorName" label="测量因子名称" align="center"> </el-table-column>
            <el-table-column prop="name" label="名称" align="center"> </el-table-column>
            <el-table-column  label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" plain>删 除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
      v-show="total >0"
       :total="total"
       :page.sync="params.pageNum"
       :limit.sync="params.pageSize"
       @pagination="getExamList"
      />
        </el-card>
      </div>

      <!-- 添加弹窗 -->
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="45%"
  :before-close="handleClose">
<el-form :label-position="labelPosition" label-width="140px" :model="form" :rules="rules" ref="form">
 
  <el-form-item label="题目名称" prop="name">
    <el-input v-model="form.name" ></el-input>
  </el-form-item>
  <el-form-item label="选择测量表" prop="measureId">
    <el-select v-model="form.measureId"  placeholder="请选择" @change="changeValue" style="width:300px">
        <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        >
        </el-option>
      </el-select>
  </el-form-item>
  <el-form-item  label="选择测量因子" >
        <el-radio-group v-model="form.factorId">
            <el-radio  
             v-for="item in options1"
             :key="item.factorId"
             :label="item.factorId"
             >{{item.factorName}}</el-radio>
        </el-radio-group>
  </el-form-item>
 <el-form-item label="题目类型" v-if="tableShow"  >
     <el-select v-model="form.status"  placeholder="请选择题目类型" clearable filterable style="width: 300px;">
        <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        </el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="年龄阶段" v-if="ageShow">
     <el-select v-model="form.distinguish"  placeholder="请选择年龄阶段" clearable filterable style="width: 300px;">
        <el-option
        v-for="item in ageOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="选项类型" >
     <el-select v-model="form.optionsType"  placeholder="选项类型" clearable filterable style="width: 300px;" @change="examType">
        <el-option
        v-for="item in options3"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="选项答案是否有解释" v-if="typeShow == 0 || typeShow == 2">
     <el-select v-model="form.type"  placeholder="请选择" clearable filterable style="width: 300px;" @change="answerType">
        <el-option
        v-for="item in options4"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        </el-option>
    </el-select>
  </el-form-item>
  <!-- <el-form-item label="题目内容" v-if="typeShow == 1">
    <el-input v-model="form.name" ></el-input>
  </el-form-item> -->
  <el-form-item label="选项：" v-if="typeShow == 0">
    <el-radio-group
      v-model="form.examAnswerList"
      ref="select"
      style="width:100%"
    >
      <div v-for="item in number" :key="item.index" >
        <el-row :gutter="20">
          <el-col :span="14">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入选项内容"
              v-model="item.examOption"
            >
            </el-input>
          </el-col>
          <el-col :span="5">
            <el-input
              placeholder="请输入选项分数"
              v-model="item.fraction"
            >
            </el-input>
          </el-col>
        </el-row>
      </div>
    </el-radio-group>
    <el-form-item >
      <el-button
      type="primary"
      size="small"
      icon="el-icon-circle-plus-outline"
      @click="addSelect"
      >添加选项</el-button>
    </el-form-item>
  </el-form-item>

  <el-form-item label="选项：" v-if="typeShow == 2">
    <el-radio-group
      v-model="form.examAnswerList"
      ref="select"
      style="width:100%"
    >
      <div v-for="item in number" :key="item.index" >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入选项内容"
              v-model="item.examOption"
            >
            </el-input>
          </el-col>
          <el-col :span="12">
            <el-input
            type="textarea"
            :autosize="{ minRows: 2 }"
              placeholder="请输入选项解释"
              v-model="item.suggestion"
            >
            </el-input>
          </el-col>
        </el-row>
      </div>
    </el-radio-group>
    <el-form-item >
      <el-button
      type="primary"
      size="small"
      icon="el-icon-circle-plus-outline"
      @click="addSelect"
      >添加选项</el-button>
    </el-form-item>
    
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit" v-if="!show">确 定</el-button>
    <el-button type="primary" @click="update" v-else>修 改</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { getList1,getDetails1 } from "@/api/table/table";
import { getList} from "@/api/factor/factor";
import { getExamList,getAdd,getUpdate, getFactors,getDetails,getDet} from "@/api/exam/exam";

export default {
  name: '',
  data () {
    return {
        tableData:[],
        labelPosition: 'right',
        dialogVisible:false,
        title:'',
        currentPage1:1,
        total:0,
        // pageSize:10,
        // pageNum:1,
        params:{
          pageSize:10,
          pageNum:1,
        },
        paramsFlag:0,
        form:{
            name:'',
            measureId:'',
            factorId:'',
            examAnswerList:[],
            // fraction:[],
        },
        show:false,
        options:[],
        options1:[],
        options5:[],
        number: [
        {
          index: 0,
          examOption: "",
          fraction:'',
          suggestion:'',
        },
        {
          index: 1,
          examOption: "",
          fraction:'',
          suggestion:'',
        },
        {
          index: 2,
          examOption: "",
          fraction:'',
          suggestion:'',
        },
        {
          index: 3,
          examOption: "",
          fraction:'',
          suggestion:'',
        },
        {
          index: 4,
          examOption: "",
          fraction:'',
          suggestion:'',
        },
      ],
       rules: {
          name: [
            { required: true, message: '请输入题目名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          measureId: [
            { required: true, message: '请选择测量表', trigger: 'change' }
          ],
          examAnswerList: [
            { required: true, message: '请填写选项', trigger: 'change' }
          ],
        },
        options2:[{
          value: 1,
          label: '正常题目'
        }, {
          value: 2,
          label: '测伪题'
        }, {
          value: 3,
          label: '辅助题'
        }],
        options3:[{
          value: 1,
          label: '单选'
        }, {
          value: 2,
          label: '多选'
        }, {
          value: 3,
          label: '输入框'
        }],
        options4:[{
          value: 0,
          label: '无'
        }, {
          value: 1,
          label: '有'
        }],
        ageOptions:[{
          value: 1,
          label: '6个月-1岁11月'
        }, {
          value: 2,
          label: '2岁-3岁5个月'
        },{
          value: 3,
          label: '3岁6个月-4岁11个月'
        },{
          value: 4,
          label: '5岁-6岁5个月'
        },{
          value: 5,
          label: '6岁6个月-8岁5个月'
        },{
          value: 6,
          label: '8岁6个月-10岁5个月'
        },{
          value: 7,
          label: '10岁6个月以上'
        },],
        typeShow:0,
        tableId:undefined,
        tableShow:false,
        ageShow:false,
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    answerType(val){
      if(val == 0){
        this.typeShow = 0
      }else{
        this.typeShow = 2
      }
    },
    examType(val){
      console.log(val);
      if(val == 3 ){
        this.typeShow = 1
      }else {
        this.typeShow = 0
      }
    },
    // 重置
     resetParams() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
      };
      this.search();
    },
    // 搜索
    search(){
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getExamList();
    },
    // 删除操作
    handleDeleteClick(row){
      this.$confirm('此操作将删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          getDet(row.id).then(res => {
          if (res.code == 200) {
            this.getExamList()
          }
        });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 修改操作
    update(){
       this.$refs["form"].validate(valid => {
            if (valid) {
              getUpdate(this.form).then(res => {
            if(res.code == 200){
                // console.log(res);
                this.$message.success("修改成功");
                this.dialogVisible = false
                this.getExamList()
            }
        })
          }
      });
    },
    // 修改按钮
    handleUpdateClick(row){
        this.show = true
        this.title = '修改'
       getDetails(row.id).then(res=>{
            if(res.code == 200){
                // console.log(res);
        this.form = JSON.parse(JSON.stringify(res.data))
        if(this.form.type	 == 0){
          this.typeShow = 0
        }else{
          this.typeShow = 2
        }
        this.number = this.form.examAnswerList;                           
            }
        })
        getFactors(row.measureId).then(res => {
            if(res.code == 200){
                console.log(res,789);
                this.options1 = res.rows
            }
        });
        // console.log(this.form.measureId);
        this.dialogVisible = true
    },
    // 添加选项
    addSelect() {
      let i = this.number.length;
      this.number.push({
        index: i,
        examOption: "",
        fraction:'',
      });
    },
      changeValue(val){
        // console.log(val);
        this.tableId = val
        this.getTableDes()
          getFactors(val).then(res => {
            if(res.code == 200){
                console.log(res,132);
                this.options1 = res.rows
            }
        });
      },
      // 获取测量表详情
      getTableDes(){
        getDetails1(this.tableId).then(res => {
            if(res.code == 200){
                // console.log(res);
                let table = res.data
                if(table.name == '大学生人格健康调查表（UPI）'){
                  this.tableShow = true
                }else{
                  this.tableShow = false
                }
                if(table.name == '婴儿—初中生社会生活能力量表'){
                  this.ageShow = true
                }else{
                  this.ageShow = false
                }
            }
        });
      },
      //   获取测量表
      getTableList() {
        getList1().then(res => {
            if(res.code == 200){
                this.options = res.rows
                // console.log(this.options);
            }
        });
    },
     //   获取测量因子
      getFactorList() {
        getList().then(res => {
            if(res.code == 200){
                // console.log(res,1111);
                // this.options1 = res.rows
                this.options5 = res.rows
                // console.log(this.options1);
            }
        });
    },
       // 新增操作
    onSubmit: function(){
        var data = [];
          this.number.forEach((item,index) => {
            if(item.examOption !== ''){
              data.push(item)
            }
          })
          this.form.examAnswerList = data;
        this.$refs["form"].validate(valid => {
          if (valid) {
            // console.log(this.form);
            getAdd(this.form).then(res => {
                if(res.code == 200){
                    // console.log(res);
                  this.$message.success("添加成功");
                  this.dialogVisible = false
                  this.form = {}
                  this.getExamList()
                }
            });
          }
      });
    },
    //   添加按钮
    add(){
        this.title = '添加'
        this.form = {}
        this.dialogVisible = true
        this.show = false
        this.options1 = []
        this.number = [{index: 0,examOption: '',fraction:''},{index: 1,examOption: '',fraction:''},{index: 2,examOption: '',fraction:''},
        {index: 3,examOption: '',fraction:''},{index: 4,examOption: '',fraction:''}];
    },
      //   获取所有
      getExamList() {
        // let data = {
        //   pageSize:this.pageSize,
        //   pageNum:this.pageNum,
        // }
        getExamList(this.params).then(res => {
            if(res.code == 200){
                // console.log(res);
                this.tableData = res.rows
                this.total = res.total
                // console.log(this.tableData,this.options);
                for (let i = 0; i < this.tableData.length; i++) {
                   for (let j = 0; j < this.options.length; j++) {
                          //  console.log(this.tableData[i].measureId,this.options[j].id);
                       if(this.tableData[i].measureId == this.options[j].id){
                           this.tableData[i]['measureName'] = this.options[j].name
                       }
                   }
                }
            }
        });
        
    },
    handleClose(){
        this.dialogVisible =false
    },
  },
  created () {
      this.getTableList()
      this.getExamList()
      this.getFactorList()
  },
  mounted () {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box{
    margin: 10px;
    .btn{
        margin: 10px;
    }
   
}
 .select_box {
    display: block;
    // vertical-align: middle;
  }
  .select {
  // display: block;
  margin-bottom: 10px;
  // vertical-align: middle;
}
 .el-row {
    margin-bottom: 20px !important;
    &:last-child {
      margin-bottom: 0 ;
    }
  }
</style>
